<template>
  <div class="aboutApp app-container">
    <div class="content">
      <div class="header ctnBox">
        <img :src="l1" alt="" class="logo">
        <div class="title">
          <h3>{{ $t('aboutApp.title1') }}</h3>
          <p>{{ $t('aboutApp.title2') }}</p>
        </div>
        <div class="btn">
          <el-button size="large" type="primary" round>
            <img :src="l3" alt="">
            <span>{{ $t('aboutApp.dl1') }}</span>
          </el-button>
        </div>
        <div class="btn">
          <el-button size="large" type="primary" round>
            <img :src="l2" alt="">
            <span>{{ $t('aboutApp.dl2') }}</span>
          </el-button>
        </div>
      </div>

      <div class="iconCtn ctnBox">
        <h4>{{ $t('aboutApp.t1') }}</h4>
        <div class="icon">
          <div class="iconItem">
            <img :src="b1" alt="">
            <div class="t1">{{ $t('aboutApp.a11') }}</div>
            <div class="t2">{{ $t('aboutApp.a12') }}</div>
          </div>
          <div class="iconItem">
            <img :src="b2" alt="">
            <div class="t1">{{ $t('aboutApp.a21') }}</div>
            <div class="t2">{{ $t('aboutApp.a22') }}</div>
          </div>
          <div class="iconItem">
            <img :src="b3" alt="">
            <div class="t1">{{ $t('aboutApp.a31') }}</div>
            <div class="t2">{{ $t('aboutApp.a32') }}</div>
          </div>
          <div class="iconItem">
            <img :src="b4" alt="">
            <div class="t1">{{ $t('aboutApp.a41') }}</div>
            <div class="t2">{{ $t('aboutApp.a42') }}</div>
          </div>
          <div class="iconItem">
              <img :src="b5" alt="">
              <div class="t1">{{ $t('aboutApp.a51') }}</div>
              <div class="t2">{{ $t('aboutApp.a52') }}</div>
            </div>
            <div class="iconItem">
              <img :src="b6" alt="">
              <div class="t1">{{ $t('aboutApp.a61') }}</div>
              <div class="t2">{{ $t('aboutApp.a62') }}</div>
          </div>
          <div class="iconItem">
            <img :src="b7" alt="">
            <div class="t1">{{ $t('aboutApp.a71') }}</div>
            <div class="t2">{{ $t('aboutApp.a72') }}</div>
          </div>
        </div>
      </div>

      <div class="textCtn ctnBox">
        <p>{{ $t('aboutApp.p1') }}</p>
        <p>{{ $t('aboutApp.p2') }}  </p>  
        <p>{{ $t('aboutApp.p3') }}</p>
      </div>

      <div class="imgCtn ctnBox">
        <h4>{{ $t('aboutApp.t2') }}</h4>
        <div class="imgList">
          <div class="imgItem"><img :src="c1" alt=""></div>
          <div class="imgItem"><img :src="c2" alt=""></div>
          <div class="imgItem"><img :src="c3" alt=""></div>
          <div class="imgItem"><img :src="c4" alt=""></div>
          <div class="imgItem"><img :src="c5" alt=""></div>
          <div class="imgItem"><img :src="c6" alt=""></div>
        </div>
      </div>

      <div class="msgCtn ctnBox">
        <h4>{{ $t('aboutApp.t3') }}</h4>
        <div class="tabs">
          <div class="tab" :class="{active: activeTab == 1}" @click="tabClick(1)">邮箱</div>
          <div class="tab" :class="{active: activeTab == 2}" @click="tabClick(2)">微信公众号</div>
          <div class="tab" :class="{active: activeTab == 3}" @click="tabClick(3)">微信客服</div>
        </div>

        <div v-show="activeTab == 1" class="emailMsg">
          <div style="margin-bottom: 10px;">
            <el-input v-model="emailMsg.mail" placeholder="请输入你的邮箱" />
          </div>
          <div style="margin-bottom: 10px;">
            <el-input v-model="emailMsg.mail" type="textarea" :rows="5" placeholder="请描述你的问题" />
          </div>
          <div style="text-align: right;">
            <el-button type="primary" @click="subEmailMsg">提交问题</el-button>
          </div>
        </div>
        <div v-show="activeTab == 2" style="text-align: center;">
          <img :src="d1" alt="">
          <p>扫码识别了解更多内容</p>
        </div>
        <div v-show="activeTab == 3" style="text-align: center;">
          <img :src="d1" alt="">
          <p>扫码识别了解更多内容</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import {ElMessage} from "element-plus";
import l1 from '@/assets/images/l1.png'
import l2 from '@/assets/images/l2.png'
import l3 from '@/assets/images/l3.png'
import b1 from '@/assets/images/b1.png'
import b2 from '@/assets/images/b2.png'
import b3 from '@/assets/images/b3.png'
import b4 from '@/assets/images/b4.png'
import b5 from '@/assets/images/b5.png'
import b6 from '@/assets/images/b6.png'
import b7 from '@/assets/images/b7.png'
import c1 from '@/assets/images/c1.png'
import c2 from '@/assets/images/c2.png'
import c3 from '@/assets/images/c3.png'
import c4 from '@/assets/images/c4.png'
import c5 from '@/assets/images/c5.png'
import c6 from '@/assets/images/c6.png'
import d1 from '@/assets/images/d1.png'

const activeTab = ref(1)
const tabClick = (index) => {
  activeTab.value = index
}

const emailMsg = reactive({
  mail: '',
  msg: ''
})
const subEmailMsg = () => {
  console.log(emailMsg)
  if (!emailMsg.mail) {
    ElMessage.error('请输入邮箱')
    return
  }
  if (!emailMsg.msg) {
    ElMessage.error('请输入问题描述')
    return
  }
  ElMessage.success('提交成功')

}
</script>
<style lang="scss">
.aboutApp {
  margin-bottom: 100px;
  .content {
    background: #fff;
    padding: 20px 30px;
  }
  .ctnBox {
    padding: 30px 20px;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    width: 100%;
  }
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
      width: 90px;
      height: 90px;
    }
    .title {
      flex: 1;
      margin-left: 20px;
    }
    .btn {
      margin: 0 20px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }

  .iconCtn {
    .icon {
      padding: 20px;
      .iconItem {
        width: 24.5%;
        display: inline-block;
        text-align: center;
        padding: 10px 0;
        vertical-align: top;
        padding: 16px;
        img {
          width: 90px;
          height: 90px;
        }
        .t1 {
          font-size: 18px;
          line-height: 2;
        }
        .t2 {
          font-size: 14px;
          color: rgba(54, 54, 54, 1);
          line-height: 1.5;
        }
      }
    }
  }

  .textCtn {
    p {
      margin-bottom: 20px;
      line-height: 1.5;
      color: rgba(54, 54, 54, 1);
      font-size: 16px;
      text-indent: 2em;
    }
  }

  .imgCtn {
    .imgItem {
      width: 33%;
      padding: 10px;
      display: inline-block;
      img {
        width: 100%;
      }
    }
  }

  .msgCtn {
    border-bottom: none;
    .tabs {
      padding: 20px 0;
      text-align: center;
      .tab {
        display: inline-block;
        width: 180px;
        border-right: 1px solid rgba(219, 219, 219, 1);;
        cursor: pointer;
        font-size: 18px;
        &:last-child {
          border-right: none;
        }
        &.active {
          color: #000;
          font-weight: bold;
        }
      }
    }

    .emailMsg {
      max-width: 700px;
      margin: 0 auto;
    }
  }
}
</style>
